<template>
	<div class="wrap">
		<el-row :gutter="20">
			<el-col :span="4">
				<el-form-item label="姓名">
					<el-input v-model.trim="search.houName"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="4">
				<el-form-item label="职工号">
					<el-input v-model.number="search.houId"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="2">
				<el-button class="btn" @click="submitSearch">
					<el-icon>
						<Search />
					</el-icon>
					搜索</el-button
				>
			</el-col>
			<el-col :span="2">
				<el-button class="btn" @click="showdialog = true">
					<el-icon><CirclePlusFilled /></el-icon>添加宿管
				</el-button>
			</el-col>
		</el-row>

		<el-table
			v-loading="loading"
			element-loading-text="拼命加载中..."
			:data="domiInfo"
			:header-cell-style="{ backgroundColor: '#00B4D422', color: '#000' }"
			:row-style="tableRowClassName"
			>
			<!-- <el-table-column prop="stuName" label="头像" /> -->
			<el-table-column prop="houName" label="宿管姓名"> </el-table-column>
			<el-table-column prop="houId" label="职工编号" sortable />
			<el-table-column prop="sex" label="性别">
				<template #default="{ row: { sex } }">
					{{ sex == 1 ? '男' : sex == 2 ? '女' : '保密' }}
				</template>
			</el-table-column>
			<el-table-column prop="buildId" label="管理楼栋" />
			<el-table-column prop="limits" label="权限" />
			<el-table-column prop="phone" label="联系电话" />
			<el-table-column prop="email" label="电子邮箱" />
			<el-table-column label="操作">
				<template #default="{ row }">
					<el-button type="danger" link @click="handleClick(row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 分页 -->
		<el-row class="pagination">
			<el-pagination
				v-model:current-page="currentPage"
				v-model:page-size="pageSize"
				:page-sizes="pageSizes"
				small="small"
				:background="true"
				layout="total, sizes, prev, pager, next"
				:total="total"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange" />
		</el-row>

		<!-- 对话框 -->
		<AddDomiDialog v-model:show="showdialog" @get-total="getTotal" />

		<!-- 删除对话框 -->
		<DeleteDialog v-model:show="showDelDialog">
			<template #containt>
				{{ target.houName }}
			</template>
			<template #btn>
				<el-button type="primary" link @click="showDelDialog = false">取消</el-button>
				<el-button type="danger" link @click="handleDelete">确认删除</el-button>
			</template>
		</DeleteDialog>
	</div>
</template>

<script setup>
import {onMounted, ref } from 'vue'
import { getDomiManagerInfo } from '@/utils/axios/master'
import AddDomiDialog from '@/components/dialog/AddDomiDialog.vue'
import DeleteDialog from '@/components/dialog/DeleteDialog.vue'
import { Search } from '@element-plus/icons'
import { getHouCount } from '@/utils/axios/getTotal'
import { getHouIdName, deleteHouId } from '@/utils/axios/master'

const loading = ref(false)

// 显示添加对话框
const showdialog = ref(false)
// 显示删除对话框
const showDelDialog = ref(false)
// 删除对象
const target = ref({})

const domiInfo = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const pageSizes = ref([10, 20, 30])
// 分页总数
const total = ref(0)
// 搜索方式
const search = ref({
	houId: '',
	houName: '',
})


// 处理自定义事件获取总数
const getTotal = (val) => {
	total.value = val
}

const handleSizeChange = async (val) => {
	let { data } = await getDomiManagerInfo({ currentPage: currentPage.value, pageSize: val })
	domiInfo.value = data
}

const handleCurrentChange = async (val) => {
	let { data } = await getDomiManagerInfo({ currentPage: val })
	domiInfo.value = data
}

const tableRowClassName = ({ row, rowIndex }) => {
	if (rowIndex % 2 === 1) {
		return { backgroundColor: '#00B4D411' }
	}
	return ''
}

// 删除管理员
async function handleDelete() {
	await deleteHouId(target.value)
	await init()
	showDelDialog.value=false
}

// 处理删除点击事件
function handleClick(val) {
	showDelDialog.value = true
	target.value = val
}

async function submitSearch() {
	if(search.value.houId == '' && search.value.houName == ''){
		init()
	}
	if(search.value.houId == '' ){
		search.value.houId = 0
	}
	let { data } = await getHouIdName(search.value)
	domiInfo.value = data
	total.value = data?.length
}

async function init() {
	let { data } = await getDomiManagerInfo({ currentPage: currentPage.value, pageSize: pageSize.value })
	// 获取总条数
	let res = await getHouCount()
	total.value = res.data
	domiInfo.value = data
}

onMounted(async () => {
	loading.value = true
	await init()
	loading.value = false
})
</script>

<style scoped lang="scss">
.btn {
	background: rgb(0, 202, 237);
	color: #ffff;
}
.text {
	letter-spacing: 2px;
	color: #ccc;
}
.houName {
	color: rgb(0, 202, 237);
	font-style: oblique;
}
.el {
	&-input {
		width: 150px;
		margin-left: 10px;
	}
	&-select {
		width: 120px;

		margin-left: 10px;
	}
	&-row {
		margin-bottom: 15px;
	}
}
.header {
	margin-bottom: 20px;
}
</style>
